<template>
  <div>
    <div class="banner" v-if="houdunarr.length !== 0">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item
          v-for="v in houdunarr"
          :key="v.musicId"
          :title="v.typetitle"
          @click="seturl(v.musicUrl)"
        >
          <img :src="v.musicPic" alt="" />
        </van-swipe-item>
      </van-swipe>
      <iframe
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        width="100%"
        height="105"
        :src="musicUrl"
      ></iframe>
    </div>
    <div class="banner" v-else>
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item
          v-for="v in moniarr"
          :key="v.bannerId"
          :title="v.typeTitle"
        >
          <img :src="v.pic" alt="" />
        </van-swipe-item>
      </van-swipe>
      <iframe
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        width="100%"
        height="105"
        :src="musicUrl"
      ></iframe>
    </div>
  </div>
</template>

<script>
import { getlink } from "@/api/getlink";
// import { getdata } from "@/api/getlink";

export default {
  data() {
    return {
      houdunarr: [],
      moniarr: [],
      musicUrl: "",
    };
  },
  mounted() {
    getlink("/xpf/home").then((ok) => {
      this.moniarr = ok.data.data.blocks[0].extInfo.banners;
    });
    // 请求后端接口
    // ------------------------------
    getlink("/proxy/lunbo/findAllLunbo").then((ok) => {
      this.houdunarr = ok.data.data;
    });
    //---------------------------------------
    // getdata("/proxy/lunbo/nextMusic", "get", {
    //   id: 1,
    // }).then((ok) => {
    //   console.log(ok.data.data);
    //   // this.musicurl.replace(,ok.data.data.musicurl)
    // });
  },
  methods: {
    seturl(musicUrl) {
      this.musicUrl = `//music.163.com/outchain/player?type=2&id=${musicUrl}&auto=1&height=66`;
    },
  },
};
</script>

<style lang="less" scoped>
.banner {
  background-color: white;
  overflow: hidden;
  img {
    margin: 0 auto;
    width: 6.9rem;
  }
  iframe {
    position: fixed;
    bottom: 1.36rem;
    z-index: 2000;
  }
  /deep/ .van-swipe__indicator {
    width: 12px;
    height: 3px;
    background-color: #ebedf0;
    /* border-radius: 100%; */
    opacity: 0.3;
    -webkit-transition: opacity 0.2s, background-color 0.2s;
    transition: opacity 0.2s, background-color 0.2s;
  }
}
</style>